*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
.top {
    width: 100%;
    height: 5vh;
    background: linear-gradient(to right, rgb(42, 46, 2), rgb(167, 178, 94), rgb(193, 129, 19), rgb(167, 178, 94), rgb(21, 37, 2));
    padding: 4px;
}

.topnav {
    width: 90%;
    margin: auto;
}

.topnav h3 {
    color: aliceblue;
    font-family: 'Pacifico', cursive;
    text-shadow: 2px 2px;
    text-shadow: 2px 2px rgb(7, 7, 7);
    text-shadow: 2px 2px 5px rgb(11, 11, 11);

}

#nav {
    width: 100%;
    height: 19vh;
    background: linear-gradient(to right, white, white, rgb(183, 166, 98), rgb(183, 166, 98), white, white);
}

.navrap {
    width: 90%;
    margin: auto;
}

.logo {
    position: absolute;
}

.logo img {
    width: 190px;
    padding-top: 5px;


}

.menu {
    float: left;
    padding: 65px;
    margin-left: 115px;
}

.menu ul {
    list-style: none;
}

.menu ul li {
    display: inline;

}

.menu ul li a {
    text-decoration: none;
    color: black;
    font-size: 22px;
    padding-left: 10px;
    padding-right: 10px;

}

.menu ul li a:hover {
    color: rgb(185, 6, 152);
    text-decoration: underline;
}

.others {
    float: right;
    padding: 60px;
}

.others ul {
    list-style: none;
}

.others ul li {
    display: inline;
}

.others ul li a {
    text-decoration: none;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
}
/* banner */
.ban{
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
}
.banrap{
    width: 100%;
   margin: auto;
   
}
.banrap img{
    width: 100%;
}
.banrap h1{
    text-align: center;
    font-family: 'Lobster', sans-serif;
    padding-left: 30px;
}
.banrap1 {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
    padding-top: 40px;
    
}
.box1 video{
    border:2px solid rgb(255, 255, 255);
    border-radius: 80px;
   
}
.box1 p{
    padding-top: 45px;
    font-size: 22px;
    font-family: 'Cedarville Cursive', cursive;
    text-align: center;
}
/* middle 1 */
.kids{
    width: 100%;
    height: 140vh;
    background: url(./gif10.gif);
    background-size: cover;
    padding: 20px;
}
.kidsrap{
    width: 87%;
    margin: auto;
}
.kidsrap h1{
    text-align: center;
    background: url(gif.gif);
    font-family: 'Cedarville Cursive', cursive;
}
.kidsrap2{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
    padding-top: 60px;
}
.box2 img{
    border-radius: 150px;
}

.kidsrap2 img {
    --c: rgba(12, 40, 36, 0.903); /* the border color */
    --b: 10px;    /* the border thickness*/
    --g: 5px;     /* the gap on hover */
    
    padding: calc(var(--g) + var(--b));
    --_g: #0000 25%,var(--c) 0;
    background: 
      conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
       var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
      conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
       0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat;
    transition: .3s, background-position .3s .3s;
    cursor: pointer;
  }
  img:hover {
    --_i: 100%;
    transition: .3s, background-size .3s .3s;
  
  }
  .kidsrap2 h3{
    text-align: center;
    font-size: 25px;
    padding: 25px;
  }
  .box2:hover{
    color: rgb(82, 60, 28);
    text-decoration: underline;
  }
  .kidsrap input{
    padding: 20px;
    color: rgb(18, 14, 14);
    border-radius: 40px;
    border-color: rgb(8, 6, 6);
    font-weight: bolder;
    text-align: center;
    background-color: rgb(175, 163, 87);
    color: rgb(0, 0, 0);
    margin-top: 15px;
    margin-left: 110px;
  }
  /* middle 2 */
 .wed{
    width: 100%;
    height: 140vh;
   background: url(./background7.jpg);
    
 }
 .wedrap{
    width: 90%;
    margin: auto;
    padding: 20px;
   
 }
 .wedrap h1{
    text-align: center;
    background: url(./background6.jpeg);
    padding: 20px;
    font-family: 'Playfair Display', serif;
    
 }
 .wedrap1{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
    padding-top: 40px;
 }
 .wedrap1 img{
    padding-top: 60px;
 }
.wedrap1 p{
    font-size: 20px;
    padding-top: 90px;
    font-family: 'Cedarville Cursive', cursive;
    font-weight: bolder;
    text-shadow: 2px 2px;
    text-shadow: 2px 2px rgb(30, 28, 28);
    text-shadow: 2px 2px 5px rgb(255, 247, 247);
    text-align: center;
}
/* middle 3 */
.wed1{
    width: 100%;
    height: 570vh;
   background: linear-gradient(to right, rgb(192, 214, 255), white, rgb(192, 224, 255));
    padding: 20px;
    
}
.wedrap10{
    width: 80%;
    margin: auto;
   
}
.wedrap10 h1{
text-align: center;
background: url(./background\ 8.jpeg);
font-family: 'Playfair Display', serif;
text-shadow: 2px 2px;
text-shadow: 2px 2px rgb(30, 28, 28);
text-shadow: 2px 2px 5px rgb(0, 0, 0);
padding: 20px;
}
.wedrap11{
    padding-top: 60px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto ;
    grid-column-gap: 30px;
    grid-row-gap: 10px;

}
.wedrap11 img{
    border-radius: 30px;
    margin-left: 90px;
}
.box5 h2{
    font-size: 40px;
    text-align: center;
    padding-top: 120px;
   
}
.box5 p{
    padding-top: 50px;
    font-size: 20px;
    text-align: center;
}
.box5 input{
    padding: 20px;
    color: rgb(18, 14, 14);
    border-radius: 40px;
    border-color: rgb(8, 6, 6);
    font-weight: bolder;
    text-align: center;
    background-color: rgb(175, 163, 87);
    color: rgb(0, 0, 0);
    margin-top: 50px;
    margin-left: 280px;
    width: 135px;
}
/* wedding cake 2 */
.box6 h2{
    font-size: 35px;
    text-align: center;
    padding-top: 150px;
    text-transform: uppercase;
}
.box6 p{
    padding-top: 70px;
    font-size: 20px;
    text-align: center;
}
.box6 input{
    padding: 20px;
    color: rgb(18, 14, 14);
    border-radius: 40px;
    border-color: rgb(8, 6, 6);
    font-weight: bolder;
    text-align: center;
    background-color: rgb(175, 163, 87);
    color: rgb(0, 0, 0);
    margin-top: 50px;
    margin-left: 280px;
    width: 135px;
}
.box7 {
    padding-top: 90px;
}
/* wedding cake 3 */
/* Same as the above coding */
/* wedding cake 4 */
/*Same as the above coding  */
/* wedding cake 5 */
/*Same as the above coding  */
/* wedding cake 6 */
/*Same as the above coding  */

/*  footer  */
.foot{
    width: 100%;
    height: 60vh;
   background: url(./back3.jpg);
   background-size: cover;
}
.footrap{
    width: 90%;
    margin: auto;
}
.foot1 img{
    border-radius: 100%;
}
.foot3{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
    padding-top: 100px;
   
}
.foot2{
    font-size: 23px;
    text-transform: uppercase;
}
.foot2 h3{
    padding: 20px;
    padding-left: 40px;
}
.foot2 ul{
    list-style: none;
}
.foot2 ul li a{
   text-decoration: none;
   color: black;
   font-weight: bolder;
   font-size: 19px;
   
}
.links{
    padding-left: 60px;
}
.links ul{
    list-style: none;
}
.links ul li{
    display: inline;
    
}
.links ul li a{
    color: rgb(0, 0, 0);
    padding-left: 20px;
    padding-right: 20px;
}